<template>
	<view class="pagesContent">
		<view class="pagesContentBg">
			<view class="navstatus"> </view>
			<view class="header">
				<view class="back" @click="goBack">
					<image class="icon" src="../../static/images/back_w.png" mode=""></image>
				</view>
				<view class="title"> 会员中心 </view>
			</view>
			<view class="top">
				<view class="left">
					<image class="icon" src="../../static/images/userphoto.png" mode=""></image>
				</view>
				<view class="right">
					<view class="name"> {{ userInfo.nickname }}</view>
					<view class="id">开通会员享更多特权</view>
				</view>
				<view class="rightTop">
					<text style="margin-top: 20rpx;" v-if="userInfo.vip_info.is_vip"> 已开通 </text>
					<text style="margin-top: 20rpx;" v-else>未开通</text>
				</view>
			</view>

			<view class="whiteBg">

				<view class="privilegeTitle">会员尊享全部特权 </view>
				<view class="privilegeList">
					<view class="itemView" v-for="(item,index) in privilegeLists" :key="index">
						<view class="item">
							<image class="icon" :src="item.icon" mode=""></image>
							<view class="text">{{ item.text }} </view>
						</view>
					</view>
				</view>

				<view class="buyVipLine"></view>
				<view class="list">
					<view class="item" v-for="(item,index) in vips" :key="index">
						<view class="item_" :class="{item_active : item.name == product.name}"
							@click="selectVipIndex(item,index)">
							<view class="tag" v-if="item.months == 999 "> 推荐 </view>
							<view class="vipTop">{{ item.name}}</view>
							<view class="sale" v-if="item.months == 24 ">买一年送一年</view>

							<view class="price "><text class="icon">￥</text>{{ item.price}}</view>
							<view class="oldPrice "><text>原价 </text><text class="del">￥ {{ item.original_price }}
								</text></view>
						</view>
					</view>
				</view>

				<view class="buyVipTitle"> 支付方式 </view>
				<!-- <view class="right" @click="goPage('/pages/user/findMember')">恢复会员</view> -->
				<view class="payoptions">
					<view class="itemView" v-for="( item,index) in payTypeList" :key="index"
						@click="selectPayOptions(item)">

						<view class="item">
							<view class="left">
								<view class="iconView">
									<image class="icon" v-if="item =='wechat'" src="../../static/images/wx_0.png"
										mode=""></image>
									<image class="icon" v-if="item =='alipay'" src="../../static/images/ali_0.png"
										mode=""></image>
								</view>
								<view class="name" v-if="item =='wechat'"> 微信支付 </view>
								<view class="name" v-if="item =='alipay'"> 支付宝支付 </view>
							</view>

							<view class="right">
								<image class="icon" v-if="selectPayItem == item"
									src="../../static/images/buyCheck_yes.png" mode=""></image>
								<image class="icon" v-else src="../../static/images/buyCheck_no.png" mode="">
								</image>



							</view>
						</view>
					</view>
				</view>				
				<view class="buy" @click="btn"> 立即开通 </view>
				<view class="agreement">
					<view class="message">
						<image class="icon" @click="agree" v-if="agreeProtocol" src="../../static/images/buyCheck_yes.png"
							mode="">
						</image>
						<image class="icon" @click="agree" v-else src="../../static/images/buyCheck_no.png" mode="">
						</image>
						<text>阅读完并已同意</text>
						<text @click="goPage('/pages/user/agreement?type=3')" style="color: #2D6AEA;"
							v-if="payTypeIndex == 1">《会员协议》</text>
					</view>
				</view>


			</view>

		</view>

	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	import {
		checkPhone,
		checkApp,
		compare
	} from "../../util/util.js"

	export default {
		data() {
			return {
				privilegeLists: [{
						icon: "../../static/images/menberIcon_0.png",
						text: "微信恢复"
					},
					{
						icon: "../../static/images/menberIcon_1.png",
						text: "QQ恢复"
					},
					{
						icon: "../../static/images/menberIcon_2.png",
						text: "视频恢复"
					},
					{
						icon: "../../static/images/menberIcon_3.png",
						text: "照片找回"
					},
				],

				hasPro: true,
				mobiles: [],
				vips: [],
				procuctIndex: 0,
				product: "",
				agreeProtocol: false,
				payTypeIndex: 1,
				payTypeList: [],
				selectPayItem: "",
				apps: [],
				wxpayInterval: null,
			};
		},

		onShow() {
			let this_ = this;
			uni.setStorageSync("showHInt", "hide") //不显示功能使用需知
			uni.setStorageSync("startInitType", "off") //进入扫描界面后   不扫描
			// #ifdef APP
			this.apps = checkApp()
			// #endif
			if (!this_.hasLogin) {
				this.goReLaunch("/pages/user/login")
			} else {
				this.$nextTick(() => {
					this.commitGetUserInfo() //获取个人信息
					this.getProductList() //获取商品	
				})
			}
		},

		computed: {
			...mapGetters(["hasLogin", "userInfo", "appMessage",
				"deviceId", "oaid", "imei", "pack", "propertyID",
				"alipay_switch",
				"wechat_pay_switch"
			]),
		},
		methods: {
			...mapMutations(["updateUserInfo"]),
			...mapActions(["commitGetUserInfo"]),
			agree() {
				this.agreeProtocol = !this.agreeProtocol
			},
			selectVipIndex(item, index) {
				this.procuctIndex = index
				this.product = item
				this.payTypeList = item.pays
				this.selectPayItem = this.payTypeList[0]
			},
			selectPayOptions(item, index) {
				this.selectPayItem = item
			},

			getProductList() {
				this.$http.post("/api/product/list", {}).then(res => {
					if (res.code == 0) {
						this.vips = res.data.list
						this.vips.forEach((v, i) => {
							let arr = []

							if (v.config.support_payment_methods.alipay.enable) {
								arr.push("alipay")
							}
							if (v.config.support_payment_methods.wechat.enable) {
								arr.push("wechat")
							}
							v.pays = arr

						})
						this.procuctIndex = 0
						this.product = this.vips[0]
						this.payTypeList = this.product.pays
						this.selectPayItem = this.payTypeList[0]
					} else {
						this.text(res.msg)
					}
				})
			},
			//  创建订单  获取订单信息 ------安卓支付
			btn() {

				let this_ = this
				if (this.userInfo.need_bind_username) {
					let this_ = this
					uni.showModal({
						title: "提醒",
						content: "当前为游客登录，请先绑定手机号",
						confirmText: "去绑定",
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								this_.goPage("/pages/user/bindMobile")
							}
						}
					})
				} else {
					if (!this.agreeProtocol) {
						this.text("请同意《会员协议》")
						return false
					}

					switch (this.selectPayItem) {
						case 'wechat':
							console.log("微信付款订单")
							this.createWeiXinOrder()
							break;
						case 'alipay':
							console.log("支付宝付款订单")
							this.createAliOrder()
							break;
					}

				}


			},

			// 微信订单
			createWeiXinOrder() {
				console.log("创建微信app支付订单")
				if (this.apps.indexOf("微信") == -1) {
					this.text("请安装微信以后再试")
					return
				}
				let this_ = this;
				uni.showLoading({
					mask: true,
				})
				let params = {
					product_id: this.product.product_id,
					is_brand: false
				}
				this.$http.post("/api/product/getWechatInfo", params).then(res => {
					uni.hideLoading()
					if (res.code == 0) {
						this.wxPay_(res.data.pay_info, "wxpay")
					} else {
						this.text(res.msg)
					}
				})

			},
			//支付宝订单
			createAliOrder() {
				console.log("创建支付宝支付订单")
				if (this.apps.indexOf("支付宝") == -1) {
					this.text("请安装支付宝以后再试")
					return
				}
				let this_ = this;
				uni.showLoading({
					mask: true,
				})
				let params = {
					product_id: this.product.product_id,
					is_brand: false,

				}
				console.log(params)
				this.$http.post("/api/product/getAlipayInfo", params).then(res => {
					console.log(res)
					uni.hideLoading()
					if (res.code == 0) {
						this.wxPay_(res.data.pay_info, "alipay")
					} else {
						this.text(res.msg)
					}
				})
			},
			wxPay_(data, pay_type) {
				console.log("pay_type", pay_type)
				console.log("data", data)
				let this_ = this
				switch (pay_type) {
					case "wxpay":
						uni.requestPayment({
							"provider": "wxpay",
							"orderInfo": data,
							success(res) {
								this_.text("支付成功")
								this_.getUserInfoData()
							},
							fail(err) {
								console.log(err)
								if (err.errMsg == 'requestPayment:fail [payment微信:-2]User canceled') {
									this_.text("用户取消支付")
								} else {
									this_.text(err.errMsg)
								}
							}
						})

						break;
					case "alipay":
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: data,
							success: function(res) {
								this_.text("支付成功")
								this_.getUserInfoData()
							},
							fail: function(err) {
								console.log(err)
								if (err.errMsg == 'requestPayment:fail [payment支付宝:62001]用户中途取消支付操作') {
									this_.text("用户中途取消支付操作")
								} else {
									this_.text(err.errMsg)
								}
							}
						});
						break;
				}
			},
			//支付后查询当前用户信息
			getUserInfoData() {
				this.$http.post("/api/user/info", {}).then(res => {
					console.log("支付后查询当前用户信息", res)
					if (res.code == 0) {
						this.updateUserInfo(res.data.info)
						setTimeout(() => {
							this.goBack()
						}, 300)
					} else {
						this.text(res.msg)
					}
				})
			},










		}
	}
</script>
<style>
	page {
		background-color: #323130;
	}
</style>

<style lang="scss" scoped>
	.pagesContent {
		.pagesContentBg {
			position: relative;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;

			.navstatus {}

			.header {
				margin-bottom: 67rpx;
				width: 100%;
				height: 88rpx;
				position: relative;

				.back {
					position: absolute;
					left: 14rpx;
					top: 0;
					width: 88rpx;
					height: 88rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.icon {
						width: 46.15rpx;
						height: 46.15rpx;
					}
				}

				.title {
					position: absolute;
					left: 104rpx;
					top: 0;
					right: 104rpx;
					color: #F8D7A3;

					font-weight: bold;
					height: 100rpx;
					text-align: center;
					font-size: 38.46rpx;
					line-height: 100rpx;
				}
			}

			.top {
				width: 673.08rpx;
				height: 230.77rpx;
				position: relative;
				background: url(../../static/images/memberTopBG.png) center center no-repeat;
				background-size: 100% 100%;
				margin: 0 auto;

				.left {
					float: left;
					width: 92.31rpx;
					height: 92.31rpx;
					margin: 46.15rpx 23.08rpx 0 38.46rpx;

					.icon {
						width: 92.31rpx;
						height: 92.31rpx;
						display: block;
					}



				}

				.right {
					float: left;
					padding-top: 24px;

					.name {
						height: 42.31rpx;
						font-size: 30.77rpx;
						font-weight: 600;
						color: #FFFFFF;
						line-height: 42.31rpx;
						margin-bottom: 9.62rpx;
					}

					.id {
						;
						height: 38.46rpx;
						font-size: 26.92rpx;
						font-weight: 400;
						color: #F3E1C4;
						line-height: 38.46rpx;
					}

				}

				.rightTop {
					position: absolute;
					top: 0;
					right: 0;
					width: 138.46rpx;
					height: 53.85rpx;
					line-height: 53.85rpx;
					border-radius: 0 30.77rpx 0 30.77rpx;
					background-color: #252323;
					font-size: 26.92rpx;
					text-align: center;
					font-weight: 400;
					color: #ABABAB;


				}
			}

			.whiteBg {
				position: absolute;
				top: 353.85rpx;
				left: 0;
				right: 0;
				bottom: 0;

				.privilegeTitle {
					width: 476.92rpx;
					height: 46.15rpx;
					background: url(../../static/images/privilegeTitleBg.png) center center no-repeat;
					background-size: 476.92rpx 11.54rpx;
					text-align: center;
					line-height: 46.15rpx;
					margin: 0 auto 17px;
					font-size: 32.69rpx;
					font-weight: 500;
					color: #F8D7A3;


				}

				.privilegeList {
					display: flex;
					margin-bottom: 30.77upx;

					.itemView {
						flex: 1;

						.item {
							.icon {
								width: 107.69rpx;
								height: 107.69upx;
								margin: 0 auto;
								display: block;
							}

							.text {
								margin-top: 7.69rpx;
								text-align: center;
								height: 38.46rpx;
								font-size: 26.92rpx;
								font-weight: 400;
								color: #F4BA94;
								line-height: 38.46rpx;


							}
						}
					}

				}



				.buyVipLine {
					width: 673.08rpx;
					height: 7.69rpx;
					margin: 0 auto 61.54rpx;
					background: url(../../static/images/buyVipLineBg.png) center center no-repeat;
					background-size: 100% 100%;

				}


				.list {
					height: 261.54rpx;
					margin-bottom: 63.46rpx;
					display: flex;

					.item {
						flex: 1;
						height: 256rpx;

						.item_ {
							width: 214rpx;
							height: 256rpx;
							background: #FFFFFF;
							border: 2rpx solid #A8B5D3;
							border-radius: 12rpx;
							margin: 0 auto;
							position: relative;

							text-align: center;

							.tag {
								position: absolute;
								top: -15rpx;
								right: 0;
								z-index: 50;
								width: 72rpx;
								height: 34rpx;
								line-height: 34rpx;
								background: linear-gradient(270deg, #FD373E 0%, #FE6857 100%);
								border-radius: 12rpx 12rpx 0px 12rpx;
								font-size: 20rpx;
								font-weight: 400;
								color: #FFFFFF;
								text-align: center;


							}

							.sale {
								position: absolute;
								top: 84rpx;
								left: 0;
								right: 0;
								z-index: 50;
								height: 34rpx;
								line-height: 34rpx;
								font-size: 20rpx;
								font-weight: 400;
								text-align: center;
								color: #A8B5D3;
							}

							.vipTop {
								padding-top: 40rpx;
								height: 32rpx;
								font-size: 32rpx;
								font-weight: 400;
								color: #333333;
								margin-bottom: 46rpx;
							}

							.price {
								height: 58rpx;
								font-size: 58rpx;
								font-weight: 600;
								color: #454655;
								margin-bottom: 30rpx;

								.icon {
									font-size: 28rpx;
									font-size: 400;
								}
							}

							.oldPrice {
								height: 24rpx;
								font-size: 24rpx;
								font-weight: 400;
								color: #454655;
								opacity: 0.8;

								.del {
									text-decoration: line-through;
								}
							}
						}

						.item_active {
							background: url(../../static/images/selectProductActive.png) center center no-repeat;
							background-size: 100% 100%;
							border: 2rpx solid rgba(0, 0, 0, 0);

							.bottom {
								text-align: center;

								.price {
									color: #173065;
								}

							}
						}

					}

				}


				.buyVipTitle {
					width: 673.08rpx;
					height: 42.31rpx;

					margin: 0 auto 38.46rpx;
					font-size: 30.77rpx;
					font-weight: 800;
					color: #FFFFFF;
					line-height: 42.31upx;

				}

				.payoptions {
					width: 673.08rpx;
					margin: 0 auto 86.54rpx;					
					.itemView {
						height: 53.85rpx;
						margin-bottom: 48.08rpx;

						.item {
							height: 53.85rpx;


							.left {

								.iconView {
									float: left;
									height: 53.85rpx;
									width: 53.85rpx;

									.icon {
										height: 53.85rpx;
										width: 53.85rpx;
										display: block;
									}
								}

								.name {
									float: left;
									margin-left: 15.38rpx;
									height: 53.85rpx;
									font-size: 30.77rpx;
									font-weight: 600;
									color: #FFFFFF;
									line-height: 53.85rpx;

								}
							}

							.right {
								width: 53.85rpx;
								height: 53.85rpx;
								float: right;
								display: flex;
								justify-content: center;
								align-items: center;

								.icon {
									width: 30.77rpx;
									height: 30.77rpx;
								}
							}



						}


					}


				}



				.buy {
					width: 673.08rpx;
					height: 92.31rpx;
					background: #226cff;
					border-radius: 92.31rpx;
					text-align: center;
					line-height: 92.31rpx;
					margin: 0 auto 20rpx;
					color: #FFFFFF;
					font-size: 32.69rpx;					
				}

				.agreement {
					margin-top: 20rpx;
					height: 48rpx;

					.message {
						width: 324rpx;
						height: 48rpx;
						margin: 0 auto;

						.icon {
							float: left;
							width: 40rpx;
							height: 40rpx;
							margin-top: 4rpx;
							margin-right: 20rpx;
						}

						text {
							float: left;
							height: 48rpx;
							line-height: 48rpx;
							font-size: 20rpx;
							color: #8a7c7c;

						}

					}
				}

			}


		}
	}
</style>